<template>
  <el-dialog title="车次票价" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" style="margin-left:15%">
    <div class="box">
      <span>票价方案：</span>
      <el-select size="mini" style="width:140px" v-model="price_scheme_id" placeholder="请选择" @change="querybuspriceList">
        <el-option v-for="(item, index) in fareSchemeList" :key="index" :label="item.fare_scheme_name" :value="item.id"> </el-option>
      </el-select>
    </div>

    <!-- 车次票价管理 -->
    <div class="table">
      <el-table :data="sectionArr" height="400" border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;margin-top:1%;" :row-class-name="tableRowClassName">
        <el-table-column label="车次编号">
          <template slot-scope="scope">
            <el-input class="Dh_frame" size="mini" v-model="form.busNum" @change="getCount(scope.row)" :disabled="true"> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="stationName" label="所属车站" width="150px"> </el-table-column>
        <el-table-column prop="sectionName" label="站点" width="150px"> </el-table-column>
        <el-table-column label="状态" width="100px">
          <template prop="id" slot-scope="scope">
            <span :style="{color: scope.row.sectionPrice.id ? '#03a9f4' : 'red'}">{{scope.row.sectionPrice.id ? '已启用' : '未启用'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="车票类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sectionPrice.ticketType" placeholder="" size="mini" class="Dh_frame" @change="getCount(scope.row)">
              <el-option v-for="item in bus_price" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="车型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sectionPrice.vehicleType" placeholder="" size="mini" class="Dh_frame" @change="getCount(scope.row)">
              <el-option v-for="item in vehicle_type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="座位类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sectionPrice.seatType" placeholder="" size="mini" class="Dh_frame" @change="getCount(scope.row)">
              <el-option v-for="item in seat_type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="票价方案">
          <template slot-scope="scope"> <el-input size="mini" v-model="scope.row.sectionPrice.priceSchemeId" @change="getCount(scope.row)"> </el-input> </template
        ></el-table-column> -->
        <el-table-column prop="address" label="序号">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.stationSerial" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="mileage" label="里程"> </el-table-column>
        <el-table-column prop="address" label="运费">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.baseCarriage" @change="getCount(scope.row)"> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="站务费">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.stationServiceFee" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="燃油附加费" width="100px">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.fuelAddFee" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="微机费">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.computeFee" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="空调费">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.coolairFee" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="卫生费">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.healthFee" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="其他费">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.otherFee" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="上限票价">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.topLimitPrice" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="下限票价">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.sectionPrice.lowerLimitPrice" @change="getCount(scope.row)">> </el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span> -->
  </el-dialog>
</template>
<script>
const api = $api.dispatch.bus_Info
export default {
  props: ['startStation', 'ticketShow', 'ticketDetails', 'ticketBusNum'],
  data() {
    return {
      dialogVisible: this.ticketShow,
      sectionArr: [],
      form: {},
      seat_type: [],
      vehicle_type: [],
      bus_price: [],
      lineDetail: {},
      newArr: [],
      fareSchemeList: [],
      price_scheme_id: '', //票价方案id
    }
  },
  mounted() {
    this.sectionArr = this.ticketDetails.lineSections
    // this.price_scheme_id = this.ticketDetails.lineSections[0].sectionPrice.priceSchemeId
    this.form.busNum = this.ticketBusNum
    this.getSeatType()
    this.getVehicle_type()
    this.getTicketType()
    this.getFareScheme()
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$emit('hide')
    },
    // 隔行变色
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    //获取票价方案
    getFareScheme() {
      api.fareSchemeQuery().then((res) => {
        this.fareSchemeList = res.rows
        this.price_scheme_id = res.rows[0].id
        this.querybuspriceList(res.rows[0].id)
      })
    },

    //查询计划车次票价
    querybuspriceList(val) {
      let data = {
        busId: this.ticketBusNum,
        priceSchemeId: val,
      }
      api.querybusprice(data).then((res) => {
        let t = {}
        if (res.length > 0) {
          this.sectionArr.forEach((e, i) => {
            t = {
              baseCarriage: 0,
              computeFee: 0,
              coolairFee: 0,
              fareSchemeId: null,
              fuelAddFee: 0,
              healthFee: 0,
              id: null,
              lowerLimitPrice: 0,
              mileage: 0,
              otherFee: 0,
              priceSchemeId: '',
              seatType: '',
              stationId: '',
              stationSerial: '',
              stationServiceFee: 0,
              ticketType: '',
              topLimitPrice: 0,
              vehicleType: '',
              index: i,
            }
            if (res[i]) {
              e.sectionPrice = res[i]
            } else {
              e.sectionPrice = t
            }
          })
        } else {
          this.sectionArr.forEach((e, i) => {
            t = {
              baseCarriage: 0,
              computeFee: 0,
              coolairFee: 0,
              fareSchemeId: null,
              fuelAddFee: 0,
              healthFee: 0,
              id: null,
              lowerLimitPrice: 0,
              mileage: 0,
              otherFee: 0,
              priceSchemeId: '',
              seatType: '',
              stationId: '',
              stationSerial: '',
              stationServiceFee: 0,
              ticketType: '',
              topLimitPrice: 0,
              vehicleType: '',
              index: i,
            }
            e.sectionPrice = t
          })
        }
      })
    },
    // 获取座位类型
    getSeatType() {
      api.sateQuery().then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.seat_type_name }
        })
        this.seat_type = arr
      })
    },
    // 获取车型
    getVehicle_type() {
      api.vehicleQuery().then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.vehicle_type_name }
        })
        this.vehicle_type = arr
      })
    },
    //获取车票类型
    getTicketType() {
      api.ticketQuery({ lineId: this.ticketDetails.lineId }).then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.ticekt_type_name }
        })
        this.bus_price = arr
      })
    },
    getDetaios(arr) {
      for (var i in arr) {
        if (arr[i] == null) {
          return true
        }
      }
      return false
    },

    getCount(k) {
      this.lineDetail = {
        bus_id: this.ticketBusNum,
        subordinateid: this.startStation,
        station_id: k.stationId,
        ticket_type: k.sectionPrice.ticketType,
        vehicle_type: k.sectionPrice.vehicleType,
        seat_type: k.sectionPrice.seatType,
        price_scheme_id: k.sectionPrice.priceSchemeId,
        station_serial: k.sectionPrice.stationSerial,
        mileage: k.mileage,
        base_carriage: k.sectionPrice.baseCarriage,
        station_servicefee: k.sectionPrice.stationServiceFee,
        fuel_add_fee: k.sectionPrice.fuelAddFee,
        compute_fee: k.sectionPrice.computeFee,
        coolair_fee: k.sectionPrice.coolairFee,
        health_fee: k.sectionPrice.healthFee,
        other_fee: k.sectionPrice.otherFee,
        toplimit_price: k.sectionPrice.topLimitPrice,
        lowerlimit_price: k.sectionPrice.lowerLimitPrice,
      }
      if (this.getDetaios(this.lineDetail) == false) {
        api
          .querylinedetailinfo({
            lineId: this.ticketDetails.id,
            busId: this.form.busNum,
          })
          .then((res) => {
            this.lineArr = res.lineSections
            // var newArr = this.lineArr.filter(function (obj) {
            //   return obj.id == k.id
            // })
            // console.log(newArr)
            if (k.sectionPrice.id != null) {
              var priceCompile = this.lineDetail
              priceCompile.id = k.sectionPrice.id
              priceCompile.price_scheme_id = this.price_scheme_id
              api.prciceUpdate(priceCompile).then((res) => {
                this.$message({
                  message: '编辑成功',
                  type: 'success',
                })
              })
            } else {
              this.lineDetail.price_scheme_id = this.price_scheme_id
              api.priceAdd(this.lineDetail).then((res) => {
                this.querybuspriceList(this.price_scheme_id)
                this.$message({
                  message: '新增成功',
                  type: 'success',
                })
              })
              // if (this.lineDetail.price_scheme_id == '') {
              //   this.$message.warning('请先选择票价方案')
              // } else {
              //   api.priceAdd(this.lineDetail).then(res => {
              //     console.log(res)
              //     this.$message({
              //       message: '新增成功',
              //       type: 'success'
              //     })
              //   })
              // }
            }
          })
      }
    },
  },
}
</script>
<style scoped>
.box {
  width: 20%;
  margin-top: 15px;
}
</style>
